<template>
  <div class="businessPage-wrapper">
    <div class="businessTopbar">
      <div class="businessTitle-wrapper">
        <div class="businessTitle-left">
          <span class="businessTitle">日管控</span>
        </div>
      </div>
      <div class="businessSearches-wrapper">
        <div class="businessSearches-left">
          <!-- <div class="businessSearchCondition" style="width: 200px">
            <label>计划编号：</label>
            <el-input class="businessConditionInput"></el-input>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <label>计划名称：</label>
                    //<el-select class="businessConditionInput"></el-select>
            <el-input class="businessConditionInput"></el-input>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="workTypeOptions.value" class="businessConditionInput" placeholder="请选择专业类型">
              <el-option v-for="item in workTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="workOrgOptions.value" class="businessConditionInput" placeholder="请选择作业单位">
              <el-option v-for="item in workOrgOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <div class="businessSearchCondition" style="width: 200px">
            <el-date-picker v-model="beginTime" type="datetime" :disabled="isDisabled" placeholder="计划开始时间">
            </el-date-picker>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <el-date-picker v-model="endTime" type="datetime" :disabled="isDisabled" placeholder="计划结束时间">
            </el-date-picker>
          </div>
          <!--  <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="workriskLevelOptions.value" class="businessConditionInput" placeholder="请选择作业风险等级">
              <el-option v-for="item in workriskLevelOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="gridriskLevelOptions.value" class="businessConditionInput" placeholder="请选择电网风险等级">
              <el-option v-for="item in gridriskLevelOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="voltageLevelOptions.value" class="businessConditionInput" placeholder="请选择电压等级">
              <el-option v-for="item in voltageLevelOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <div class="businessSearchCondition" style="width: 200px">
            <el-select v-model="value" class="businessConditionInput" placeholder="请选择计划状态">
              <el-option v-for="item in workStateOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="businessSearches-right">
          <span class="businessButtonConfirm" @click="searchCondition">立即查询</span>
          <span class="businessButtonCancel" @click="delSearchCondition">清空条件</span>
        </div>
      </div>
    </div>
    <div class="businessContent-wrapper">
      <div class="businessButtons-wrapper">
        <span class="businessButtonEdit" @click="selectPlantype0()" :class="{active:planType == 0}">今日作业管控</span>
        <span class="businessButtonEdit" @click="selectByTechnologicalProcess()"
          :class="{active:planType == 1}">日计划明细</span>
        <!-- <div
          class="businessSearchCondition"
          style="width: 150px; height: 32px; margin-top: 16px"
        >
          <el-select v-model="planType" class="businessConditionInput">
            <el-option
              v-for="item in planTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
      </div>
      <el-table class="businessTable" height="calc(100% - 120px)" :data="tableData" v-show="planType === 0">
        <el-table-column type="selection" width="50" header-align="center" align="center"></el-table-column>
        <el-table-column prop="serialNumber" label="序号" width="50" show-overflow-tooltip></el-table-column>
        <el-table-column label="计划编号" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color: blue; cursor: pointer" @click.stop="workOfDayDetail(scope.row)">{{
              scope.row.dayAndTemporaryCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dayAndTemporaryName" label="计划名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workType" label="专业类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workOrg" label="作业单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="beginTime" label="计划开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endTime" label="计划结束时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workriskLevel" label="作业风险等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="gridriskLevel" label="电网风险等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="voltageLevel" label="电压等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workState" label="计划状态" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-table class="businessTable" height="calc(100% - 120px)" :data="tableData1" v-show="planType === 1">
        <el-table-column type="selection" width="50" header-align="center" align="center"></el-table-column>
        <el-table-column prop="serialNumber" label="序号" width="50" show-overflow-tooltip></el-table-column>
        <el-table-column label="计划编号" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color: blue; cursor: pointer" @click.stop="workOfDayDetail(scope.row)">{{
              scope.row.dayAndTemporaryCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dayAndTemporaryName" label="计划名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workType" label="专业类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workOrg" label="作业单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="beginTime" label="计划开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endTime" label="计划结束时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workriskLevel" label="作业风险等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="gridriskLevel" label="电网风险等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="voltageLevel" label="电压等级" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workState" label="计划状态" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination v-if="planType==0" class="businessPagination" :total="total" @next-click="nextPage()" @prev-click="prevPage()"
        :current-page="pageNum" @current-change="handleCurrentChange" :page-size="pageSize"></el-pagination>

        <el-pagination v-if="planType==1" class="businessPagination" :total="total1" @next-click="nextPage1()" @prev-click="prevPage1()"
        :current-page="pageNum1" @current-change="handleCurrentChange1" :page-size="pageSize1"></el-pagination>
    </div>
    <!--日计划详情-->
    <div class="businessMask" v-if="workDetailShow">
      <div class="businessDialog">
        <div class="dialog-header">
          <span>{{ workDetail.title }}</span>
        </div>
        <div class="dialog-body">
          <div class="workDetail-wtableDatarapper content">
            <span class="title">作业基本信息</span>
            <table class="workDetailMsg" border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td class="thTit">作业名称</td>
                <td class="tdData">{{ baseInfo.dayAndTemporaryName }}</td>
              </tr>
              <tr>
                <td class="thTit">专业类型</td>
                <td class="tdData">{{baseInfo.workType}}</td>
              </tr>
              <tr>
                <td class="thTit">报送单位</td>
                <td class="tdData">{{baseInfo.reportUnit}}</td>
              </tr>
              <tr>
                <td class="thTit">计划开始时间</td>
                <td class="tdData">{{baseInfo.beginTime}}</td>
              </tr>
              <tr>
                <td class="thTit">计划结束时间</td>
                <td class="tdData">{{baseInfo.endTime}}</td>
              </tr>
              <tr>
                <td class="thTit">作业地点</td>
                <td class="tdData">{{baseInfo.workPlace}}</td>
              </tr>
              <tr>
                <td class="thTit">变电站/线路</td>
                <td class="tdData">{{baseInfo.substationName}}</td>
              </tr>
              <tr>
                <td class="thTit" colspan="2" style="text-align: center">
                  · 作业计划内容 ·
                </td>
              </tr>
              <tr>
                <td colspan="2" height="155px">{{baseInfo.workContents}}</td>
              </tr>
            </table>
          </div>
          <div class="workRisk-wrapper content">
            <span class="title">作业风险信息</span>
            <table class="workRiskMsg" border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td class="thTit">作业风险等级</td>
                <td class="tdData">{{baseInfo.workriskLevel}}</td>
              </tr>
              <tr>
                <td class="thTit">电网风险等级</td>
                <td class="tdData active" @click="selectByRiskWarningId(baseInfo.riskWarningId)">
                  {{baseInfo.riskWarningName}}</td>
              </tr>
              <tr>
                <td class="thTit">电压等级</td>
                <td class="tdData">{{baseInfo.voltageLevel}}</td>
              </tr>
              <tr>
                <td class="thTit">停电计划</td>
                <td :title="this.baseInfo.powercutPlanName" class="tdData active" @click="selectByPowercutPlanId(baseInfo.powercutPlanId)">
                  {{baseInfo.powercutPlanName}}</td>
              </tr>
              <tr>
                <td class="thTit">是否停电</td>
                <td class="tdData">{{baseInfo.liveWorkFlag}}</td>
              </tr>
            </table>
          </div>

          <el-dialog title="电网预警信息" :visible.sync="riskWarningVisible">
            <div class="riskWarningContent">
              <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="thTit">预警编号</td>
                  <td class="tdData">{{riskWarningInfo.riskNo}}</td>
                </tr>
                <tr>
                  <td class="thTit">风险等级</td>
                  <td class="tdData">{{riskWarningInfo.riskLevel}}</td>
                </tr>
                <tr>
                  <td class="thTit">停电设备</td>
                  <td class="tdData">{{riskWarningInfo.content}}</td>
                </tr>
                <tr>
                  <td class="thTit">预警事由</td>
                  <td class="tdData">{{riskWarningInfo.powercutReason}}</td>
                </tr>
                <tr>
                  <td class="thTit">预警时段</td>
                  <td class="tdData">{{riskWarningInfo.startDate}}--{{riskWarningInfo.overDate}}</td>
                </tr>
                <tr>
                  <td class="thTit" colspan="2" style="text-align: center">管控措施及要求</td>

                </tr>
                <td class="tdData" colspan="2" style="text-align: center">{{riskWarningInfo.solution}}</td>
              </table>
            </div>
          </el-dialog>

          <el-dialog title="停电计划" :visible.sync="powercutVisible" width="70%">
            <div class="powercutContent">
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">停电计划名称:</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple">{{baseInfo.powercutPlanName}}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">调管范围:</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple">{{powerCutInfo.powercutRange}}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">停电范围:</div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple">{{powerCutInfo.pwoercutReason}}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">停电事由</div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">{{powerCutInfo.tubeRange}}</div>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
          <!-- <div class="powercutDialog" v-if="powercutVisible">
            
            <span class="title">停电计划
              <img src="./../../assets/icons/return.png" class="Return" @click="handlePowercut()">
            </span>
             <table class="powercutMsg" cellspacing="0" cellpadding="0">
              <tr>
                <td height="50px">停电计划名称</td>
                <td width="600x">{{baseInfo.powercutPlanName}}</td>
              </tr>
              <tr>
                <td height="60px">调管范围</td>
                <td width="600px"></td>
              </tr>
              <tr>
                <td height="60px">停电范围</td>
                <td width="600px"></td>
              </tr>
              <tr>
                <td height="60px">停电事由</td>
                <td width="600px"></td>
              </tr>
            </table>
          </div> -->
          <div class="exploitingEntity-wrapper content">
            <div class="img-wrapper">
              <img src="" alt="" />
            </div>
            <div class="contact-wrapper">
              <div class="row">
                联系方式：<br />
                123456789
              </div>
              <div class="row">
                安全考试：<br />
                合格
              </div>
              <div class="row">
                安全积分：<br />
                <span style="color: red; font-weight: 700">20</span>
              </div>
            </div>
            <div class="prepareAndActualize-wrapper">
              <div class="prepare-wrapper">
                <span class="prepareTitle">作业准备</span>
                <div class="prepareButtons-wrapper">
                  <span class="prepareButton">勘察记录</span>
                  <span class="prepareButton">危险点分析</span>
                  <span class="prepareButton">三措</span>
                  <span class="prepareButton">工作票</span>
                </div>
                <span class="icon">123</span>
              </div>
              <div class="actualize-wrapper">
                <span class="actualizeTitle">作业实施</span>
                <div class="checkingPoint-wrapper">
                  <span class="checkingPoint">人员核实</span>
                  <span class="checkingPoint">工器具检查</span>
                  <span class="checkingPoint">安措布置</span>
                  <span class="checkingPoint">许可开工</span>
                </div>
                <div class="checkingPoint-wrapper">
                  <span class="checkingPoint">工作验收</span>
                  <span class="checkingPoint">作业监护</span>
                  <span class="checkingPoint">危险点控制措施落实</span>
                  <span class="checkingPoint">安全交底</span>
                </div>
              </div>
            </div>
            <div class="monitor-wrapper">监控</div>
          </div>
          <div class="workStatus-wrapper content">
            <span class="title">
              实施单位信息
              <span @click="selectImplementationUnitAll(baseInfo.dayAndTemporaryId)" class="active Return">详情</span>
            </span>
            <table class="workStatusMsg" border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td class="thTit">实施单位类型</td>
                <td class="tdData">{{workOrgInfo.workOrgType}}</td>
              </tr>
              <tr>
                <td class="thTit">实施单位名称</td>
                <td class="tdData">{{workOrgInfo.orgName}}</td>
              </tr>
              <tr>
                <td class="thTit">作业人数</td>
                <td class="tdData">{{workOrgInfo.bSsryB}}</td>
              </tr>
              <tr>
                <td class="thTit">工程项目信息</td>
                <td class="tdData" @click="selectByProjectAll(baseInfo.projectId)">{{baseInfo.projectName}}</td>
              </tr>
            </table>
          </div>
          <el-dialog title="实施单位及人员详细信息" :visible.sync="ssdwInfoShow">
            <el-table :data="workStatusInfo">
              <el-table-column property="workOrgType" label="实施单位类型" width="150"></el-table-column>
              <el-table-column property="orgName" label="实施单位名称" width="200"></el-table-column>
              <el-table-column property="dep" label="部门\工区\班组" width="200"></el-table-column>
              <el-table-column property="bSsryB" label="实施人员" class="active"></el-table-column>
            </el-table>
          </el-dialog>
          <div class="peojectInfoAll" v-if="projectInfoShow">
            <table border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td>工程项目名称</td>
                <td></td>
                <td>计划开工时间</td>
                <td></td>
                <td>计划竣工时间</td>
                <td></td>
              </tr>
              <tr>
                <td>建管单位</td>
                <td></td>
                <td>承包单位</td>
                <td></td>
                <td>分包单位</td>
                <td></td>
              </tr>
              <tr>
                <td>监理单位</td>
                <td></td>
                <td>监理单位负责人</td>
                <td></td>
                <td>监理单位联系方式</td>
                <td></td>
              </tr>
              <tr>
                <td>项目内容</td>
                <td colspan="5"></td>
              </tr>
            </table>

          </div>
          <div class="inspection-wrapper content">
            <span class="title">监督检查信息</span>
            <div>
              <template>
                <el-tabs class="inspectionTab" v-model="activeName" type="border-card">
                  <el-tab-pane label="到岗到位" name="first">
                    <test @subPrevPage="selectinspectPost" @subNextPage="selectinspectPost" ref="dgTable"
                      :tableData="inspectPostInfo" :tabColumnList="columnList">
                    </test>
                  </el-tab-pane>
                  <el-tab-pane label="监督检查" name="second">
                    <test @subPrevPage="selectCheckInformation" @subNextPage="selectCheckInformation" ref="jcTable"
                      :tableData="checkInfo" :tabColumnList="columnList2">
                    </test>
                  </el-tab-pane>
                  <el-tab-pane label="违章信息" name="third">
                    <test @subPrevPage="selectViolationInformation" @subNextPage="selectViolationInformation"
                      ref="wzTable" :tableData="peccancyInfo" :tabColumnList="columnList3">
                    </test>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
            <!-- <div class="table-wrapper">
              <span class="illegalEntry">违章录入</span>
              <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100px" height="32px">违章人</td>
                  <td width="200px">{{peccancyInfo[0].peccancyPerson}}</td>
                  <td width="100px">违章条款</td>
                  <td width="200px">{{peccancyInfo[0].peccancyPro}}</td>
                </tr>
                <tr>
                  <td width="100px" height="32px">违章性质</td>
                  <td width="200px">{{peccancyInfo[0].peccancyPro}}</td>
                  <td width="100px">违章计分</td>
                  <td width="200px">{{peccancyInfo[0].penaltyScore}}</td>
                </tr>
                <tr>
                  <td width="100px" height="32px">违章分类</td>
                  <td width="200px">{{peccancyInfo[0].PeccancyCategory}}</td>
                  <td width="100px">违章罚款</td>
                  <td width="200px">{{peccancyInfo[0].forfeit}}</td>
                </tr>
                <tr>
                  <td height="96px">违章描述</td>
                  <td colspan="3">{{peccancyInfo[0].peccancyItem}}</td>
                </tr>
                <tr>
                  <td height="64px" colspan="4">
                    <span class="icon iconfont">&#xe656;</span>
                  </td>
                </tr>
              </table>
              <div class="inspectionButtons-wrapper">
                <span class="businessButtonConfirm">违章生成记录</span>
                <span class="businessButtonCancel">重置</span>
              </div>
            </div> -->
          </div>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm">确定</span>
          <span class="systemButtonCancel" @click="workDetailShow = false">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getDayWorkList } from "@/business/api/workOfDay.js";
  import { selectByStatePlan } from "@/business/api/workOfDay.js";
  import { queryPlanStatus } from "@/business/api/workOfDay.js";
  import { selectByWorkPlanId } from "@/business/api/workOfDay.js";
  import { selectByImplementationInformation } from "@/business/api/workOfDay.js";
  import { selectViolationInformation } from "@/business/api/workOfDay.js"
  import { selectinspectPost } from "@/business/api/workOfDay.js"
  import { selectCheckInformation } from "@/business/api/workOfDay.js"
  import { selectByPowercutPlanId } from "@/business/api/workOfDay.js"
  import { selectByRiskWarningId } from "@/business/api/workOfDay.js"
  import { selectImplementationUnitAll } from "@/business/api/workOfDay.js"
  import { selectByProjectAll } from "@/business/api/workOfDay.js"
  import { selectByTechnologicalProcess } from "@/business/api/workOfDay.js"
  import{ selectByPlanProcess } from "@/business/api/workOfDay.js"
  import test from "@/business/components/test01"

  export default {
    components: {
      test
    },
    data() {
      return {
        workDetailShow: false,
        tableData: [/* {
          dayAndTemporaryCode:1,
          dayAndTemporaryName:"日计划"
        } */],
        tableData1: [],//[{ order: 1, name: "test1", num: "SD-R-20201215-001" }],
        workDetail: {
          title: "安徽省天衍#1100千伏",
        },
        baseInfo: [],//作业基本信息
        workOrgInfo: [],//实施单位信息
        workStatusInfo: [],
        inspectPost: [],//到岗到位信息
        peccancyInfo: [],//违章信息
        workStateOptions: [],//计划状态下拉框
        riskWarningInfo: [],
        powerCutInfo: [],
        projectInfo: [],
        powercutVisible: false,
        riskWarningVisible: false,
        ssdwInfoShow: false,
        projectInfoShow: false,
        beginTime: "",
        endTime: "",
        value: "",
        activeName: 'first',
        planTypeList: [
          {
            value: 0,
            label: "日计划",
          },
          {
            value: 1,
            label: "抢修计划",
          },
        ],

        isDisabled: true,
        planType: 0,
        pageSize: 5,
        pageSize1: 5,
        pageNum: 1,
        pageNum1: 1,
        total: null, // 主页表格total
        total1: null, // 主页表格total
        //pageCount:20,
        columnList: [
          {
            prop: 'checkStaffName',
            label: '到岗人员',
          },
          {
            prop: 'checkContact',
            label: '联系方式',
          },
          {
            prop: 'checkCompanyName',
            label: '公司',
          },
          {
            prop: 'checkDepartName',
            label: '部门',
          },
          {
            prop: 'CheckDuty',
            label: '职务',
          },
          {
            prop: 'checkStatus',
            label: '到岗状态',
          },
          {
            prop: 'beginTime',
            label: '到岗时间',
          }
        ],
        columnList2: [
          {
            prop: 'inspectionplanType',
            label: '检查类型',
          },
          {
            prop: 'checkStaffName',
            label: '检查人员',
          },
          {
            prop: 'checkContact',
            label: '联系方式',
          },
          {
            prop: 'checkCompanyName',
            label: '公司',
          },
          {
            prop: 'checkDepartName',
            label: '部门',
          },
          {
            prop: 'checkDuty',
            label: '职务',
          },
          {
            prop: 'checkStatus',
            label: '检查状态',
          }
        ],
        columnList3: [
          {
            prop: 'peccancyDisp',
            label: '违章内容',
          },
          {
            prop: 'peccancyPerson',
            label: '违章人',
          },
          {
            prop: 'peccancyDatetime',
            label: '检查时间',
          },
          {
            prop: 'peccancyPro',
            label: '违章性质',
          },
          {
            prop: 'penaltyScore',
            label: '违章记分',
          },
          {
            prop: 'publishState',
            label: '违章状态',
          },
          {
            prop: 'peccancyCode',
            label: '违章编号',
          }
        ],
        inspectPostInfo: [],
        checkInfo: [],
        activeName: 'first',
        workOfDayDetailRow: {}
      };
    },
    created() { },
    mounted() {
      this.getDayWorkList(); // 获取日管控列表
      this.queryPlanStatus();//获取计划状态
    },
    methods: {
      selectPlantype0() {
        this.planType = 0
      },
      /* selectPlantype1(){
        this.planType = 1
      }, */
      handlePowercut() {
        this.powercutVisible = !this.powercutVisible
      },

      selectinspectPost() {
        return new Promise((res, rej) => {
          selectinspectPost({
            workPlanId: this.workOfDayDetailRow.dayAndTemporaryId,
            pageNum: this.$refs.dgTable.page.currentPage,
            pageSize: this.$refs.dgTable.page.pageSize,
          }).then(dgdw => {
            if (dgdw.success) {
              // 这是对应的
              this.inspectPostInfo = dgdw.data.data
              this.$refs.dgTable.page.total = dgdw.data.total
            }
          }).catch(rej)
        })
      },

      selectCheckInformation() {
        return new Promise((res, rej) => {
          console.log('xxxx', this.workOfDayDetailRow)
          selectCheckInformation({
            workPlanId: this.workOfDayDetailRow.dayAndTemporaryId,
            pageNum: this.$refs.jcTable.page.currentPage,
            pageSize: this.$refs.jcTable.page.pageSize,
          }).then(jdjc => {
            if (jdjc.success) {
              // 他们是对应的
              this.checkInfo = jdjc.data.data
              this.$refs.jcTable.page.total = jdjc.data.total
            }
          }).catch(rej)
        })
      },
      selectViolationInformation() {
        return new Promise((res, rej) => {
          selectViolationInformation({
            workPlanId: this.workOfDayDetailRow.dayAndTemporaryId,
            pageNum: this.$refs.wzTable.page.currentPage,
            pageSize: this.$refs.wzTable.page.pageSize,
          }).then(wzxx => {
            if (wzxx.success) {
              // 这三个是对应的
              this.peccancyInfo = wzxx.data.data
              this.$refs.wzTable.page.total = wzxx.data.total
            }
          }).catch(rej)
        })
      },
      async selectByRiskWarningId(id) {
        this.riskWarningVisible = true;
        const res = await selectByRiskWarningId({ riskWarningId: id });
        console.log('risk', res.data)
        if (res.success) {
          
          this.riskWarningInfo = res.data
        }
      },
      async selectByPowercutPlanId(id) {
        this.powercutVisible = true;
        const res = await selectByPowercutPlanId({ powercutPlanId: id });
        console.log(res.data)
        if (res.success) {
          this.powerCutInfo = res.data
        }
      },
      async selectImplementationUnitAll(id) {
        console.log('id', id)
        this.ssdwInfoShow = true;
        const res = await selectImplementationUnitAll({ projectId: id });

        console.log(res)
        if (res.success) {
          this.projectInfo = res.data
        }
      },
      async selectByProjectAll(id) {
        console.log('id', id)
        this.projectInfoShow = true;
        const res = await selectByProjectAll({ workPlanId: id });
        //'cd8c6e41-e084-4604-b5e5-d6477e69e508'
        console.log(res)
        if (res.success) {
          this.workStatusInfo = res.data
        }
      },
      async workOfDayDetail(row) {
        this.workDetailShow = true;
        const res = await selectByWorkPlanId({ dayAndTemporaryId: row.dayAndTemporaryId });
        console.log(res.data)
        if (res.success) {
          this.baseInfo = res.data
          console.log('111111111111', this.baseInfo)
        }
        const ssdw = await selectByImplementationInformation({ workPlanId: row.dayAndTemporaryId });
        if (ssdw.success) {
          this.workOrgInfo = ssdw.data;
          console.log('222222222222', this.workOrgInfo)
        }
        console.log('ssdw', ssdw.data)

        this.workOfDayDetailRow = row
        this.selectinspectPost()
        this.selectCheckInformation()
        this.selectViolationInformation()

      },

      delSearchCondition() {
        // 清空查询条件
        this.value = "";
        this.beginTime = "";
        this.endTime = "";
      },
      //获取计划状态
      async queryPlanStatus() {
        const res = await queryPlanStatus();
        console.log('计划状态', res.data)
        for (var i = 0; i < res.data.length; i++) {
          this.workStateOptions.push({
            value: res.data[i].code,
            label: res.data[i].name
          })
        }
      },
      async getDayWorkList() {
        // 获取日管控列表
        const res = await getDayWorkList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });
        if (res.success) {
          console.log(res)
          for (let i = 0; i < res.data.data.length; i++) {
            let beginTime = new Date(res.data.data[i].beginTime).toJSON();
            res.data.data[i].beginTime = new Date(
              new Date(beginTime) + 8 * 3600 * 1000
            )
              .toISOString()
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, "");
            let endTime = new Date(res.data.data[i].endTime).toJSON();
            res.data.data[i].endTime = new Date(
              new Date(endTime) + 8 * 3600 * 1000
            )
              .toISOString()
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, "");
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      },
      async selectByTechnologicalProcess() {
        // 获取日管控明细列表
        this.planType = 1
        const res = await selectByTechnologicalProcess({
          pageNum: this.pageNum1,
          pageSize: this.pageSize1,
        });
        if (res.success) {
          console.log(res)
          for (let i = 0; i < res.data.data.length; i++) {
            let beginTime = new Date(res.data.data[i].beginTime).toJSON();
            res.data.data[i].beginTime = new Date(
              new Date(beginTime) + 8 * 3600 * 1000
            )
              .toISOString()
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, "");
            let endTime = new Date(res.data.data[i].endTime).toJSON();
            res.data.data[i].endTime = new Date(
              new Date(endTime) + 8 * 3600 * 1000
            )
              .toISOString()
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, "");
          }
          this.tableData1 = res.data.data;
          this.total1 = res.data.total;
        }
      },
      nextPage() {
        // 下一页
        this.pageNum = this.pageNum + 1;
        this.getDayWorkList();
      },
      nextPage1() {
        // 下一页
        this.pageNum1 = this.pageNum1 + 1;
        this.selectByTechnologicalProcess();
      },
      prevPage() {
        // 上一页
        this.pageNum = this.pageNum - 1;
        this.getDayWorkList();
      },
      prevPage1() {
        // 上一页
        this.pageNum1 = this.pageNum1 - 1;
        this.selectByTechnologicalProcess();
      },
      /* subPrevPage(){
        this.pageNum = this.pageNum - 1;
      },
      subNextPage(){
        this.pageNum = this.pageNum + 1;
      },
       */
      handleCurrentChange(val) { // 点击页码数字跳转
        this.pageNum = val;
        this.getDayWorkList();
      },
      handleCurrentChange1(val) { // 点击页码数字跳转
        this.pageNum1 = val;
        this.selectByTechnologicalProcess();
      },
      //根据计划状态查询
      async searchCondition() {
        if (this.planType == 0) {
          if (this.value == "") {
            this.getDayWorkList()
          } else {
            const res = await selectByStatePlan({
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              workState: this.value
            });
            if (res.success) {
              console.log('res', res)
              this.tableData = res.data.data

            }
          }
        }else if(this.planType == 1){
          if (this.value == "") {
            this.selectByTechnologicalProcess()
          } else {
            console.log('sssssssssssssssss',this.value)
            const res = await selectByPlanProcess({
              pageNum: this.pageNum1,
              pageSize: this.pageSize1,
              workState: this.value
            });
            if (res.success) {
              console.log('res', res)
              this.tableData1 = res.data.data

            }
          }
        }

      }
    },



  };
</script>

<style lang="scss" scoped>
  .businessContent-wrapper {
    height: calc(100% - 133px);
  }

  .businessSearchCondition {
    margin-bottom: 15px;
  }

  .businessDialog {
    width: 100%;
    height: 100%;

    .thTit,
        .tdData {
          position: sticky;
          top: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          /* &:hover {
              overflow: visible;
              white-space:pre-wrap;
            } */
        }
    .dialog-body {
      display: grid;
      grid-row-gap: 12px;
      grid-column-gap: 12px;
      grid-template-columns: 288px 288px auto;
      grid-template-rows: repeat(4, 1fr);

      .workRiskMsg,
      .workStatusMsg,
      .workDetailMsg {
        overflow: auto;
        table-layout: fixed;
        width: 290px;
        .thTit {
          height: 32px;
          width: 90px;
          text-align: right;

        }

        .tdData {
          height: 32px;
          width: 200px;
          text-align: left;
        }
      }

      .riskWarningContent {
        text-align: center;

        table {
          table-layout: fixed;
          width: 400px;

          .tdData {
            height: 32px;
            width: 300px;
            text-align: left;
          }

          .thTit {
            height: 32px;
            width: 80px;
            text-align: right;
          }
        }
      }

      .content {
        border-radius: 4px;
        overflow: auto;


        .title {
          display: inline-block;
          background-color: #ecf5fa;
          height: 34px;
          font-size: 14px;
          width: 100%;
          padding-left: 16px;
          border-left: 4px solid #1f2d6c;
          margin-bottom: 12px;
        }

        table,
        table tr td {
          border: 0.5px solid #eee;

          /* &:nth-child(2n + 1) {
            color: DimGray;
            font-size: 13px;
            text-align: right;
            padding-right: 5px;
            box-sizing: border-box;
            
          } */

          .el-input {
            ::v-deep input {
              border: none !important;
            }

            &:hover ::v-deep input {
              background-color: transparent !important;
            }
          }

          .icon {
            float: left;
            font-size: 1.5em;
            margin-left: 8px;
            cursor: pointer;
          }
        }
      }

      .workDetail-wrapper {
        grid-row-start: 1;
        grid-row-end: 3;
      }

      .powercutDialog {
        position: absolute;
        top: 255px;
        left: 315px;

        .title {
          background-color: #5b9bd5;
          height: 31px;
          color: #f3f8fc;
        }

      }

      .exploitingEntity-wrapper {
        grid-row-start: 1;
        grid-row-end: 6;
        min-width: 956px;

        .detailInfo {
          float: right;
        }

        .img-wrapper {
          width: 178px;
          height: 245px;
          background-color: #effafe;
          float: left;
        }

        .contact-wrapper {
          background-color: #effafe;
          width: 123px;
          height: 245px;
          float: left;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }

        .prepareAndActualize-wrapper {
          height: 245px;
          width: calc(100% - 301px);
          float: left;
          display: flex;
          flex-direction: column;

          .prepare-wrapper {
            height: 75px;
            width: 100%;
            background-color: #daedf3;
            display: flex;
            align-items: center;

            .prepareTitle {
              font-size: 16px;
              text-align: center;
              width: 130px;
              position: relative;

              &:after {
                display: block;
                content: "";
                width: 4px;
                height: 1em;
                background-color: #1d2c71;
                position: absolute;
                left: 18px;
                top: 50%;
                transform: translateY(-50%);
              }
            }

            .prepareButtons-wrapper {
              flex: auto;
              display: flex;
              justify-content: space-around;

              .prepareButton {
                border: 2px solid #ccc;
                padding: 8px 28px;
                border-radius: 16px;
                cursor: pointer;
              }
            }

            .icon {
              width: 76px;
              text-align: center;
              cursor: pointer;
            }
          }

          .actualize-wrapper {
            height: calc(100% - 75px);
            width: 100%;
            background-color: #e6f4f7;
            position: relative;

            .actualizeTitle {
              font-size: 16px;
              text-align: center;
              position: relative;
              display: inline-block;
              padding-left: 18px;
              margin-top: 20px;
              margin-left: 16px;

              &:after {
                display: block;
                content: "";
                width: 4px;
                height: 1em;
                background-color: #1d2c71;
                position: absolute;
                left: 0px;
                top: 50%;
                transform: translateY(-50%);
              }
            }

            &:before {
              display: block;
              content: "";
              position: absolute;
              width: 90%;
              height: 64px;
              border: 3px solid #d3e6ec;
              top: 74px;
              left: 50%;
              transform: translateX(-50%);
              border-left: none;
              border-top-right-radius: 12px;
              border-bottom-right-radius: 12px;
            }
          }

          .checkingPoint-wrapper {
            font-size: 16px;
            height: calc(50% - 22px);
            display: flex;
            justify-content: space-around;
            align-items: start;

            .checkingPoint {
              position: relative;

              &:after {
                display: block;
                content: "";
                position: absolute;
                left: 50%;
                bottom: -20px;
                transform: translateX(-50%);
                background-color: #d8e8e5;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                border: 2px solid #fff;
              }
            }
          }
        }

        .monitor-wrapper {
          width: 100%;
          height: calc(100% - 245px);
          border: 1px solid red;
          float: left;
        }
      }

      .inspection-wrapper {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 6;
        text-align: center;

        /deep/ .el-table_row td {
          height: 20px;
          font-size: 10px;
          text-align: center;
          text-overflow: ellipsis;
        }

        .title {
          background-color: #dff1f1;
          border-left: 4px solid #009a92;
        }

        .el-table_body {
          font-size: 18px;
        }

        .illegalEntry {
          border: 1px solid #ccc;
          display: inline-block;
          text-align: center;
          width: 192px;
          height: 35px;
          line-height: 35px;
          background-color: #fff;
          border-bottom: none;
          transform: translateY(1px);
          font-size: 14px;
        }

        .table-wrapper {
          border: 1px solid #ccc;
          padding: 16px;
          text-align: center;

          .inspectionButtons-wrapper {
            text-align: right;
            padding-top: 16px;

            .businessButtonConfirm {
              background-color: #21bab8;
            }

            .businessButtonCancel {
              background-color: #656565;
              color: #fff;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }

  td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .active {
    text-decoration: underline;
    color: blue;
  }

  .wzinfo {
    tr td {
      width: 100px;
      height: 32px;
    }
  }

  .Return {
    float: right;
  }
</style>